<template>
  <div>
    <el-dialog title="分类详情" :visible.sync="showDialog_" custom-class='dialog_right MkCategoryDetail dialogScroll_detail' top="0%" @close='closeDialog("addForm")' @open='openDialog'>
      <div class="operationBtnInRightDialog">
        <span class='infoIcon'  @click="dialogVisible_edit = true"><i class="el-icon-edit"></i> 编辑</span>
        <!--<span class="operationLine">|</span>-->
        <span class='infoIcon' @click="deleteCategory" ><i class="el-icon-delete"></i> 删除</span>
      </div>
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight - 110)+'px'}]">
        <div class="contentDiv">
      <el-form  label-width="80px">
        <el-form-item  label="分类名称">
          {{currentObj.name}}
        </el-form-item>
        <el-form-item  label="上级分类" v-if="currentObj.parentId!==1">
        {{currentObj.parentName}}
        </el-form-item>
        <el-form-item label="是否展示">
          {{currentObj.status == 'ENABLE'?'是' : '否'}}
        </el-form-item>
        <el-form-item  label="排序">
          {{currentObj.weight}}
        </el-form-item>
        <el-form-item  label="描述"  v-if="currentObj.des">
          {{currentObj.des}}
        </el-form-item>
        <el-form-item label="分类图片">
          <template v-if="currentObj.icon">
            <div class="showImage" @click="viewImage(currentObj.icon)">
              <img :src="currentObj.icon" alt=""/>
            </div>
          </template>
          <template v-else>
            无
          </template>
        </el-form-item>
      </el-form>
        </div>
      </el-scrollbar>
    </el-dialog>

    <!--预览图片-->
    <el-dialog :visible.sync="imageDialogVisible"  custom-class="show-image-dialog" top="0%">
      <img :src="imageViewUrl" alt=""/>
    </el-dialog>

    <!--编辑-->
    <mk-add-category :showDialog='dialogVisible_edit'  v-on:closeDialog='closeDialog_edit' :currentObj="currentObj"></mk-add-category>
  </div>
</template>

<script>
  import MkAddCategory from './MkAddCategory.vue'
  import serveService from '../../services/serve'
  import {mapState} from 'vuex'
  export default {
    name: 'MkCategoryDetail',
    components: {
      MkAddCategory
    },
    props: ['showDialog','currentObjId'],
    computed:mapState({
      bodyHeight: state => state.global.bodyHeight
    }),
    methods: {
      deleteCategory() {
        this.$confirm('您确定要删除该分类?','删除分类',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          closeOnPressEscape:false,
          customClass: 'confirmBox_warning'
        }).then(()=>{
          serveService.deleteServeServer({id:this.currentObj.id},data=>{
            this.$message.success('删除成功');
            this.showDialog_ = false;
            this.isRefresh = true;
          })
        }).catch(()=>{

        })
      },
      closeDialog_edit(type) {
        this.isRefresh = type;
        this.dialogVisible_edit = false;
        this.showDialog_ = false;
      },
      viewImage(src) {
        this.imageViewUrl = src;
        this.imageDialogVisible = true;
      },
      closeDialog() {
        this.$emit('closeDialog',this.isRefresh);
      },
      openDialog() {
        this.isRefresh = false;
        serveService.loadServeDetailServer({id:this.currentObjId},data=>{
          this.currentObj = data.data;
        })
      },
    },
    watch: {
      showDialog: function(value) {
        this.showDialog_ = value;
      }
    },
    data () {
      return {
        dialogVisible_edit: false,
        imageDialogVisible: false,
        imageViewUrl:'',
        isRefresh: false,
        currentObj:{},
        showDialog_: this.showDialog,
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  @import '../../assets/style/main.less';
  .MkCategoryDetail{
    .showImage{
      .showImageInFixedContainer(120px,120px);
      cursor:pointer;
    }
    .el-form-item{
      margin-bottom:10px;
    }

  }
</style>
